const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack')

module.exports = {
	// entry: path.resolve(__dirname,"../","src/main.js"),

	entry: {
		chunk: ['react', 'react-dom/client'],
		app: {
			// import 用来指定业务代码的入口
			import: path.resolve(__dirname, '../', 'src/main.js'),
			dependOn: 'chunk',
		},
	},

	output: {
		// 出口必须指定决定路径
		// path: path.resolve(__dirname,"dist"),
		filename: 'js/[name].[chunkhash:8].js',
		clean: true,
	},
	// 插件增强webpack功能
	plugins: [
		new HtmlWebpackPlugin({
			// template: "./public/index.html"
			template: path.resolve(__dirname, '../', 'public/index.html'),
			inject: 'body', // 把打包后的js文件插入到<body>标签里
			title: 'react-antd-admin',
			favicon: path.resolve(__dirname, '../', 'public/favicon.svg'),
		}),
		// new ProgressPlugin({
		//     handler(percentage,message, ...args) {
		//         console.log(percentage)
		//     }
		// })
		new ProgressPlugin(),
		new ProvidePlugin({
			React: path.resolve(__dirname, '../', 'node_modules/react/index.js'), // 全局
		}),
	],
	// loader 加载器，在webpack处理某些模块之前，先使用loader进行处理
	module: {
		rules: [
			// 当webpack开始工作时，遇到了以.js结尾的模块，先使用babel-loader进行加载
			// 当loader加载完后，还需要使用一些@babel/* 进行语法转化，转化成ES5代码
			{ test: /\.(js|jsx|ts|tsx)$/, use: 'babel-loader', exclude: /node_modules/ },
			// 使用css-loader加载解析返回内容交给style-loader来处理，然后以操作DOM形式插入到head标签中（内部样式）
			{ test: /\.(css|scss)$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
			{
				test: /\.(png|jpg|svg|gif|jpeg|webp)$/,
				type: 'asset/resource',
				generator: {
					filename: 'img/[name].[hash:8][ext]',
				},
			},
		],
	},
}
